<template>
	<view class="goback">
		<navigator open-type="navigateBack">
			<view class="backioc">
				<uni-icons type="arrow-left" size="30"></uni-icons>
			</view>
		</navigator>
		<text>确认订单</text>
	</view>
	<!-- <view class="boerh"></view> -->
	<view class="inmorder">
		<view class="ima-dd">
			<image src="../../common/images/demo.png"></image>
		</view>
		<view class="text-dd">
			东风日产得力摩托车和军队进攻的机会国家都会感觉到和
		</view>
	</view>
	<view class="title-demo">
		<text>的房间退坡i如何规划阶段库萨克数据库</text>
		<text>的房间退坡i如何规划阶段库萨克数据库</text>
		<text>的房间退坡i如何规划阶段库萨克数据库</text>
		<text>的房间退坡i如何规划阶段库萨克数据11111111111111111111库</text>
	</view>

	<view class="font-porsen" @touchstart="handleTouchStart" @touchmove="handleTouchMove">
		111111
	</view>
</template>

<script>
	export default {
		data() {
			return {

			}
		},
		mounted() {
			window.addEventListener('scroll', this.handleScroll, true)
		},
		methods: {


			handleScroll() {
				//方法一
				var top = Math.floor(document.body.scrollTop || document.documentElement.scrollTop || window.pageYOffset)
				console.log(top)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.vod-body {
		height: 360px;
		overflow: hidden;
		z-index: 110;
	}

	.vod-body--item {
		height: 100%;
		overflow: auto;

	}

	.goback {
		width: 750rpx;
		height: 50px;
		border-bottom: 1px solid #c8c8c8;
		background-color: white;
		text-align: center;
		line-height: 50px;
		font-size: 38rpx;
		position: relative;

		z-index: 111;

		.backioc {
			position: absolute;
			display: inline-block;
			left: 30rpx;
		}
	}

	.boerh {
		width: 750rpx;
		height: 50px;
	}

	.inmorder {
		position: sticky;
		top: 0px;
		background-color: white;
		width: 100%;
		display: flex;
		border: 1px solid #c8c8c8;
		align-items: flex-start;

		.ima-dd {
			width: 250rpx;
			height: 250rpx;
			overflow: hidden;
			background-color: red;

			image {
				width: 100%;
				height: 100%;
				overflow: hidden;
			}
		}

		.text-dd {
			width: 500rpx;
			margin-left: 20px;
			margin-top: 30px;
			padding-right: 5px;
		}
	}

	.title-demo {
		display: flex;
		flex-direction: column;
		align-items: center;

		text {
			width: 650rpx;
			height: 60rpx;
			background-color: #e7e7e7;
			display: block;
			text-align: center;
			margin-bottom: 8px;
			line-height: 60rpx;
			border-radius: 15rpx;
			border: 1px solid #a8a8a8;
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
		}

		>text:nth-child(1) {
			margin-top: 20px;
		}
	}

	.font-porsen {
		width: 680rpx;
		height: 1000px;
		margin: 0 auto;
		background-color: red;

	}
</style>